Gantt Chart এবং Timeline Chart হল দুইটি অত্যন্ত গুরুত্বপূর্ণ চার্ট যা প্রকল্প ব্যবস্থাপনা (Project Management) এবং টাইমলাইন ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন করতে ব্যবহৃত হয়। Gantt Chart সাধারণত প্রকল্পের সময়সীমা, কাজের গতি, এবং কর্মী/দলের অগ্রগতি দেখানোর জন্য ব্যবহৃত হয়। অন্যদিকে, Timeline Chart সময়ের সাথে বিভিন্ন ইভেন্ট বা কার্যক্রমের ধারাবাহিকতা প্রদর্শন করে।
এখানে আমরা Gantt Chart এবং Timeline Chart কাস্টমাইজ করার জন্য বিভিন্ন টেকনিক এবং অপশন আলোচনা করবো।
১. Gantt Chart তৈরি করা এবং কাস্টমাইজেশন
Gantt Chart মূলত একটি বার চার্টের মতো কাজ করে, যেখানে প্রতিটি বার একটি কাজ বা প্রকল্পের সময়সীমা প্রদর্শন করে।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gantt Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['1', 'Planning', 'Team A', new Date(2024, 0, 1), new Date(2024, 0, 10), null, 100, null],
['2', 'Design', 'Team B', new Date(2024, 0, 11), new Date(2024, 1, 1), null, 50, '1'],
['3', 'Development', 'Team C', new Date(2024, 1, 2), new Date(2024, 2, 15), null, 30, '2'],
['4', 'Testing', 'Team D', new Date(2024, 2, 16), new Date(2024, 3, 5), null, 0, '3'],
]);
var options = {
height: 400,
gantt: {
criticalPathEnabled: true,
criticalPathStyle: {
stroke: '#e64a19',
strokeWidth: 5
},
arrow: {
angle: 45,
width: 4,
color: 'green',
radius: 0
}
}
};
var chart = new google.visualization.Gantt(document.getElementById('gantt_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Gantt Chart Example</h2>
<div id="gantt_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কাস্টমাইজেশন:
- কাজের সময়সীমা এবং অগ্রগতি:
Start DateএবংEnd Dateকলাম ব্যবহার করে প্রতিটি কাজের সময়সীমা নির্ধারণ করা হয়েছে।Percent Completeকলাম দ্বারা কাজের অগ্রগতি চিহ্নিত করা হয়েছে। - কাস্টম সিএসএস স্টাইলিং:
criticalPathStyleব্যবহার করে গুরুত্বপূর্ণ কাজগুলোর জন্য রঙ এবং প্রস্থ নির্ধারণ করা হয়েছে। - অ্যানিমেশন এবং তীর:
arrowঅপশনে কাজের মধ্যে সময়ের নির্দেশক তীর (Arrow) যোগ করা হয়েছে, যা প্রজেক্টের অগ্রগতি প্রদর্শন করে। - কাস্টম হাইট:
height: 400দ্বারা চিত্রের উচ্চতা কাস্টমাইজ করা হয়েছে।
২. Timeline Chart তৈরি করা এবং কাস্টমাইজেশন
Timeline Chart হল একটি লিনিয়ার টাইমলাইন যা সময়ের সাথে বিভিন্ন ইভেন্ট বা কার্যক্রমের অবস্থান এবং প্রগতি প্রদর্শন করে।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Position' });
data.addColumn({ type: 'string', id: 'Name' });
data.addColumn({ type: 'date', id: 'Start' });
data.addColumn({ type: 'date', id: 'End' });
data.addRows([
['Engineer', 'Design', new Date(2024, 0, 1), new Date(2024, 0, 15)],
['Engineer', 'Development', new Date(2024, 0, 16), new Date(2024, 2, 15)],
['Tester', 'Testing', new Date(2024, 2, 16), new Date(2024, 3, 5)],
['Manager', 'Project Closure', new Date(2024, 3, 6), new Date(2024, 3, 10)]
]);
var options = {
timeline: {
showRowLabels: true, // Row লেবেল দেখানো
avoidOverlappingGridLines: true, // গ্রীডলাইনগুলো অপসারণ করা
colorByRowLabel: true, // লেবেল অনুযায়ী রঙ পরিবর্তন করা
},
height: 400
};
var chart = new google.visualization.Timeline(document.getElementById('timeline_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Timeline Chart Example</h2>
<div id="timeline_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কাস্টমাইজেশন:
- Row Labels:
showRowLabels: trueদ্বারা টাইমলাইন চার্টের রো লেবেল দেখানো হচ্ছে, যা প্রতিটি টাস্ক বা ইভেন্টের নাম দেখাবে। - রঙ কাস্টমাইজেশন:
colorByRowLabel: trueব্যবহার করে, বিভিন্ন কাজের জন্য আলাদা রঙ প্রদর্শন করা হচ্ছে, যা সহজে বুঝতে সাহায্য করে কোন কাজটি কোন দলে। - উচ্চতা কাস্টমাইজেশন:
height: 400দ্বারা চার্টের উচ্চতা নির্ধারণ করা হয়েছে।
উপসংহার
Gantt Chart এবং Timeline Chart হল কার্যকরী টুলস যা প্রজেক্ট ম্যানেজমেন্ট এবং টাইমলাইন ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন করতে ব্যবহৃত হয়। এগুলির কাস্টমাইজেশন টেকনিক্স ব্যবহারের মাধ্যমে আপনি আপনার ডেটার উপর আরও গভীর বিশ্লেষণ এবং সুন্দর উপস্থাপন তৈরি করতে পারেন।
- Gantt Chart-এ বিভিন্ন কাজের সময়সীমা, অগ্রগতি এবং গুরুত্বপূর্ণ টাস্কগুলোর জন্য স্টাইলিং কাস্টমাইজ করা যেতে পারে।
- Timeline Chart-এ ইভেন্টগুলোর উপর রঙ এবং কাস্টম অপশন ব্যবহার করে আরও সুস্পষ্ট এবং তথ্যপূর্ণ টাইমলাইন তৈরি করা সম্ভব।
Content added By
Read more
